<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Title</title>

</head>
    <style>
    	#container{
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            font-size: 30px;
    	}
    </style>
<body>

    <div id="container"></div>
    <button id="button">点击取消debounce</button>
    
</body>

<script type='text/Javascript'>
    
//  * 2. throttle节流
//  * 节流，在事件不断的触发过程中，使事件间隔预定时间内才被执行一次
var count = 1;
var container = document.getElementById('container');

function getUserAction() {
    container.innerHTML = count++;
};
let throttle = throttle1;
container.onmousemove = throttle(getUserAction, 1500);


//第一版  使用时间差来判断是否执行函数
function throttle(func, wait) {
    var context, args;
    var previous = 0;


    //这里使用时间差来判断是否执行函数
    return function() {
        var now = +new Date();
        context = this;
        args = arguments;
        console.log(arguments)
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

//第二版  使用定时器

function throttle2(func, wait) {
    var timeout;

    return function() {
        var context = this;
        var args = arguments;
        if (!timeout) {         //如果定时器不存在就 创建定时器；在预定时间后执行函数
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}




</script>
</html>